<template>
    <a-spin :spinning="spinning" tip="加载中...">
        <a-select :show-search="openSearch" :placeholder="placeholder" @popupScroll="popupScroll" @search="onSearch"
            @change="onChange" optionFilterProp="children" :disabled="disabled" :value="value">
            <a-select-option v-for="(item, index) in dataList" :key="index" :value="item[valueName]">
                {{ showNames(item) }}
            </a-select-option>
        </a-select>
    </a-spin>
</template>

<script>
export default {
    name: 'PaginationSearchSelect',
    props: {
        placeholder: {
            type: String,
            default: '请输入',
            required: false,
        },
        listUrl: {//获取数据的后端服务地址
            type: String,
            required: true,
        },
        listUrlParam: {//获取数据的请求参数
            type: Object,
            required: false,
        },
        valueName: {
            type: String,
            required: true,
        },
        pageSize: {
            type: Number,
            default: 10,
            required: false,
        },
        openSearch: {
            type: Boolean,
            default: false,
            required: false,
        },
        showNameArr: {
            type: Array,
            required: true,
        },
        value: {
            type: [String, Number],
            required: false,
        },
        disabled: {
            type: Boolean,
            default: false,
            required: false,
        },
        triggerChange: {
            type: Boolean,
            default: false,
            required: false,
        },
        searchWordKeyArr: {//指定搜索的字段名
            type: Array,
            required: true,
        }
    },
    data() {
        return {
            dataList: [],
            pageNum: 1,
            max: false,
            spinning: false,
            searchWord: undefined
        }
    },
    mounted() {
        this.loadDatas()
    },
    methods: {
        loadDatas() {
            this.pageNum = 1
            var param = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchWord: this.searchWord,
            }
            if (this.listUrlParam) {
                Object.assign(param, this.listUrlParam);
            }
            if (this.searchWordKeyArr && this.openSearch && this.searchWord && this.searchWord.length > 0) {
                this.searchWordKeyArr.forEach(item => {
                    param[item] = this.searchWord
                })
            }
            this.$get(this.listUrl, param).then((res) => {
                if (res.status == '200') {
                    if (res.data != null) {
                        this.dataList = res.data.rows
                        // this.change(this.value);
                    }

                }
            })
        },
        showNames(item) {
            var str = [];
            this.showNameArr.forEach(element => {
                str.push(item[element]);
            });
            return str.join(' - ');
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        //滚动条滚动监听方法
        async popupScroll(e) {
            const that = this
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop //滑动总高度
            const sorollt = target.scrollTop
            const clientHeight = target.clientHeight //滑动最低高度
            // 当下拉框滚动条到达底部的时候
            if (!this.max && scrollHeight < clientHeight + 2) {
                this.spinning = true
                //数据起始条数
                this.pageNum++
                var newList = []
                var param = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    searchWord: this.searchWord,
                }
                if (this.listUrlParam) {
                    Object.assign(param, this.listUrlParam);
                }
                if (this.searchWordKeyArr && this.openSearch && this.searchWord && this.searchWord.length > 0) {
                    this.searchWordKeyArr.forEach(item => {
                        param[item] = this.searchWord
                    })
                }
                console.log("this.popupScroll.param:" + param);
                await this.$get(this.listUrl, param).then((res) => {
                    if (res.status == '200') {
                        newList = res.data.rows
                        if (newList.length == 0) {
                            that.max = true
                        }
                    }
                })
                //数据追加
                this.dataList = this.dataList.concat(newList)
                target.scrollTop = sorollt
                this.spinning = false
            }
        },
        //下拉框搜索方法
        onSearch(val) {
            if (val.length != 0) {
                this.searchWord = val
                this.dataList = []
                this.max = false
                this.loadDatas()
            } else {
                this.searchWord = undefined
                this.dataList = []
                this.max = false
                this.loadDatas()
            }
        },
        onChange(val) {
            this.$emit('input', val);
            /*
          if (this.triggerChange) {
            this.$emit('change', val);
          } else {
            this.$emit('input', val);
          }*/
        }
    }
    ,
    watch: {
        value: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                // console.log(newV);
            }
        }
    }
}
</script>

<style scoped>
.spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}
</style>
